<template>
  <main-layout v-bind:headerContent="title" class="code">
    <flex-center>
      <el-card :body-style="{ padding: '0px' }">
        <el-image
          :src="require('../assets/view.jpg')"
          :preview-src-list="[require('../assets/view.jpg')]"
        >
        </el-image>
      </el-card>
    </flex-center>
  </main-layout>
</template>

<script>
import MainLayout from "../layout/Main.vue";
import FlexCenter from "../layout/FlexCenter.vue";
export default {
  components: {
    MainLayout,
    FlexCenter,
  },
  data() {
    return {
      title: "恭喜您第一关解码成功咯",
      //url: "https://jerrychane.oss-cn-beijing.aliyuncs.com/images/uploads/2018/02/2017070402.jpg",
      //url: "require('../assets/view.jpg')",
      // srcList: [
      //   "require(../assets/view.jpg)",
      // ],
    };
  },
};
</script>

<style scoped>
.code {
  background: #e7fae7 url("../assets/30304.png") repeat fixed center;
}
.el-card {
  margin: auto;
  max-width: 60%;
  max-height: 60%;
}
.el-image {
  max-height: 100%;
}
</style>
